<template>
	<CustomContainer class="setClothBox" pagePath="setClothes" title="添加衣服">
		<view class="picker">
			<uni-forms ref="form" :modelValue="formData" :rules="rules" label-position="top" v-if="current === 0">
				<uni-forms-item label="上传图片" name="imageValue" required>
					<!-- <uni-file-picker
						v-model="formData.imageValue"
						fileMediatype="image"
						mode="grid"
						:sizeType="sizeType"
						ref="files"
						:auto-upload="false"
						@select="select" 
						@progress="progress" 
						@success="success" 
						@fail="fail" 
					/> -->
					<!-- <uni-file-picker 
						v-model="imageValue" 
						fileMediatype="image" 
						mode="grid" 
						@select="select" 
						@progress="progress" 
						@success="success" 
						@fail="fail" 
					/> -->
				</uni-forms-item>
				<uni-forms-item label="选择类型" name="type" required>
					<uni-data-select
						v-model="formData.type"
						:localdata="typeList"
						:disabled="formData.imageValue.length > 0 ? false : true"
						:placeholder="formData.imageValue.length > 0 ? '请选择类型' : '请先选择图片'"
					></uni-data-select>
				</uni-forms-item>
				<view class="miniBtn">
					<button class="btn" size="mini" type="default" :disabled="loading" @click="closeDrawer">取消</button>
					<button class="btnRight" size="mini" type="primary" :loading="loading" :disabled="formData.imageValue.length > 0 ? false : true" @click="submit('form')">
						提交
					</button>
				</view>
			</uni-forms>
			<view class="add_type" v-if="current === 1">
				<uni-notice-bar background-color="rgb(243 242 240)" color="rgb(163 163 163)" text="注意: 多个类型之间使用 ',' 分开" />
				<uni-forms ref="typeForm" :modelValue="typeFormData" :rules="addRules" label-position="top">
					<uni-forms-item label="类型" name="addType" required>
						<uni-easyinput v-model="typeFormData.addType" placeholder="请输类型" type="textarea" trim="true" />
					</uni-forms-item>
					<view class="miniBtn">
						<button class="btn" size="mini" type="default" @click="closeDrawer">取消</button>
						<button class="btnRight" size="mini" type="primary" @click="addType('typeForm')">提交</button>
					</view>
				</uni-forms>
			</view>
		</view>
	</CustomContainer>
</template>

<script>
import CustomContainer from '@/components/CustomContainer.vue';
export default {
	data() {
		return {
			formData: {
				imageValue: [],
				type: ''
			},
			typeFormData: {
				addType: ''
			},
			rules: {
				imageValue: {
					rules: [
						{
							validateFunction: (rule, value, data, callback) => {
								if (value.length === 0) {
									callback('请选择图片');
								}
								return true;
							}
						}
					]
				},
				type: {
					rules: [
						{
							required: true,
							errorMessage: '请选择类型'
						}
					]
				}
			},
			addRules: {
				addType: {
					rules: [
						{
							required: true,
							errorMessage: '类型不能为空,请输入类型'
						}
					]
				}
			},
			typeList: [
				{
					value: '测试',
					text: '测试'
				}
			],
			// 分段器数据
			current: 0,
			items: ['上传图片', '设置类型'],
			sizeType: ['compressed'],
			user_infor: {},
			loading: false
		};
	},
	components: {
		CustomContainer
	},
	onReady() {
		// 需要在onReady中设置规则
		//this.$refs.form.setRules(this.rules);
	},
	mounted() {
		this.user_infor = uni.getStorageSync('token')[0];
		// uniCloud
		// 	.callFunction({
		// 		name: 'uni-captcha',
		// 		data: {
		// 			action: 'getTypeList',
		// 			params: {
		// 				parentType: this.parentType
		// 			}
		// 		}
		// 	})
		// 	.then(res => {
		// 		this.typeList = res?.result?.data?.map(item => {
		// 			return {
		// 				value: item.type,
		// 				text: item.name
		// 			};
		// 		});
		// 	});
	},
	methods: {
		// 上传图片
		submit(ref) {
			this.loading = true;
			setTimeout(() => {
				console.log('formData.imageValue', this.formData.imageValue);
				this.$refs['form']
					.validate()
					.then(res => {
						this.$refs.files.upload();
					})
					.catch(err => {
						this.loading = false;
					});
			}, 500);
		},
		// 分段器点击事件
		onClickItem(e) {
			this.current = e.currentIndex;
		},
		// 是否展示抽屉
		showDrawer() {
			this.$refs.showRight.open();
		},
		// 关闭抽屉
		closeDrawer() {
			this.$refs.showRight.close();
			this.formData = {
				imageValue: [],
				type: ''
			};
			this.typeFormData = {
				addType: ''
			};
		},

		// 获取上传状态
		select(e){
			console.log('选择文件：',e)
		},
		// 获取上传进度
		progress(e){
			console.log('上传进度：',e)
		},

		// 上传成功
		success(e){
			console.log('上传成功')
		},

		// 上传失败
		fail(e){
			console.log('上传失败：',e)
		},
		// 新增类型
		addType(ref) {
			this.$refs[ref]
				.validate()
				.then(res => {
					uni.showLoading();
					if (res?.addType) {
						const newStr = res?.addType.replace(/[\uff0c]/g, ',').split(',');
						const params = newStr.map(item => {
							return {
								type: item,
								name: item,
								parentType: this.parentType
							};
						});
						// uniCloud
						// 	.callFunction({
						// 		name: 'uni-captcha',
						// 		data: {
						// 			action: 'addTypeList',
						// 			params: params || {}
						// 		}
						// 	})
						// 	.then(res => {
						// 		const { result } = res || {};
						// 		if (result?.errList) {
						// 			uni.showToast({
						// 				title: `[ ${result?.errList.join(',')} ]等类型重复`,
						// 				icon: 'error',
						// 				duration: 2000
						// 			});
						// 		} else {
						// 			this.typeFormData.addType = '';
						// 		}
						// 		uni.hideLoading();
						// 	});
					}
				})
				.catch(err => {
					//console.log('表单错误信息：', err);
				});
		}
	}
};
</script>

<style scoped lang="less">
.setClothBox {
	.picker {
		background-color: #fff;
	}
}
</style>
